<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Node 第 3 天 | Megasu的笔记</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/heima2020/favicon.ico">
    <meta name="description" content="Megasu的笔记整理">
    <meta name="author" content="Megasu">
    <meta name="Keywords" content="学习网站,前端,分享">
    <link rel="preload" href="/heima2020/assets/css/0.styles.aa663799.css" as="style"><link rel="preload" href="/heima2020/assets/js/app.e2adc9d2.js" as="script"><link rel="preload" href="/heima2020/assets/js/2.7389c9d3.js" as="script"><link rel="preload" href="/heima2020/assets/js/6.1b7d5a6d.js" as="script"><link rel="prefetch" href="/heima2020/assets/js/10.8b750e5f.js"><link rel="prefetch" href="/heima2020/assets/js/11.9224f975.js"><link rel="prefetch" href="/heima2020/assets/js/12.3ea117b6.js"><link rel="prefetch" href="/heima2020/assets/js/13.7524b74f.js"><link rel="prefetch" href="/heima2020/assets/js/14.cee0fcf8.js"><link rel="prefetch" href="/heima2020/assets/js/15.7a4a27f7.js"><link rel="prefetch" href="/heima2020/assets/js/16.947d882b.js"><link rel="prefetch" href="/heima2020/assets/js/17.79d3becb.js"><link rel="prefetch" href="/heima2020/assets/js/18.48208e3a.js"><link rel="prefetch" href="/heima2020/assets/js/19.3d0c49ef.js"><link rel="prefetch" href="/heima2020/assets/js/20.1f6114c8.js"><link rel="prefetch" href="/heima2020/assets/js/21.85e67b4a.js"><link rel="prefetch" href="/heima2020/assets/js/22.ce482f4d.js"><link rel="prefetch" href="/heima2020/assets/js/23.a150bd35.js"><link rel="prefetch" href="/heima2020/assets/js/24.8cd80d5d.js"><link rel="prefetch" href="/heima2020/assets/js/25.0001c7c1.js"><link rel="prefetch" href="/heima2020/assets/js/26.aa4d65a5.js"><link rel="prefetch" href="/heima2020/assets/js/27.baffff1d.js"><link rel="prefetch" href="/heima2020/assets/js/28.20430dcf.js"><link rel="prefetch" href="/heima2020/assets/js/29.7bbc3c04.js"><link rel="prefetch" href="/heima2020/assets/js/3.0076a912.js"><link rel="prefetch" href="/heima2020/assets/js/30.5f74696f.js"><link rel="prefetch" href="/heima2020/assets/js/31.a0bf56d6.js"><link rel="prefetch" href="/heima2020/assets/js/32.dd5a93dd.js"><link rel="prefetch" href="/heima2020/assets/js/33.92de7335.js"><link rel="prefetch" href="/heima2020/assets/js/34.bf468ed6.js"><link rel="prefetch" href="/heima2020/assets/js/35.28502be1.js"><link rel="prefetch" href="/heima2020/assets/js/36.3622a14c.js"><link rel="prefetch" href="/heima2020/assets/js/37.626e17d3.js"><link rel="prefetch" href="/heima2020/assets/js/38.860020b8.js"><link rel="prefetch" href="/heima2020/assets/js/39.c092c283.js"><link rel="prefetch" href="/heima2020/assets/js/4.586af112.js"><link rel="prefetch" href="/heima2020/assets/js/40.a6ba2743.js"><link rel="prefetch" href="/heima2020/assets/js/41.43d70bcd.js"><link rel="prefetch" href="/heima2020/assets/js/42.6486a709.js"><link rel="prefetch" href="/heima2020/assets/js/43.670b256a.js"><link rel="prefetch" href="/heima2020/assets/js/44.eb371480.js"><link rel="prefetch" href="/heima2020/assets/js/45.5b45f11e.js"><link rel="prefetch" href="/heima2020/assets/js/46.bc59be94.js"><link rel="prefetch" href="/heima2020/assets/js/47.ec36fca9.js"><link rel="prefetch" href="/heima2020/assets/js/48.51e80f8f.js"><link rel="prefetch" href="/heima2020/assets/js/5.6eb7e243.js"><link rel="prefetch" href="/heima2020/assets/js/7.f611fe3c.js"><link rel="prefetch" href="/heima2020/assets/js/8.c14cc922.js"><link rel="prefetch" href="/heima2020/assets/js/9.cd5538bb.js">
    <link rel="stylesheet" href="/heima2020/assets/css/0.styles.aa663799.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/heima2020/" class="home-link router-link-active"><!----> <span class="site-name">Megasu的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/heima2020/node/day01" class="sidebar-heading clickable open"><span>Node</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/heima2020/node/day01.html" class="sidebar-link">Node 第 1 天</a></li><li><a href="/heima2020/node/day02.html" class="sidebar-link">Node 第 2 天</a></li><li><a href="/heima2020/node/day03.html" aria-current="page" class="active sidebar-link">Node 第 3 天</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/heima2020/node/day03.html#node-第-3-天" class="sidebar-link">Node 第 3 天</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/heima2020/node/day03.html#_1-学习目标" class="sidebar-link">1. 学习目标</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day03.html#_2-包管理配置" class="sidebar-link">2. 包管理配置</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day03.html#_3-解决包下载慢的问题" class="sidebar-link">3. 解决包下载慢的问题</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day03.html#_4-包的分类" class="sidebar-link">4. 包的分类</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day03.html#_5-开发属于自己的包" class="sidebar-link">5. 开发属于自己的包</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day03.html#_6-模块的加载机制" class="sidebar-link">6. 模块的加载机制</a></li><li class="sidebar-sub-header"><a href="/heima2020/node/day03.html#_7-初始-express" class="sidebar-link">7. 初始 express</a></li></ul></li></ul></li><li><a href="/heima2020/node/day04.html" class="sidebar-link">Node 第 4 天</a></li><li><a href="/heima2020/node/day05.html" class="sidebar-link">Node 第 5 天</a></li><li><a href="/heima2020/node/day06.html" class="sidebar-link">Node 第 6 天</a></li><li><a href="/heima2020/node/day07.html" class="sidebar-link">Node 第 7 天</a></li><li><a href="/heima2020/node/day08.html" class="sidebar-link">Node 第 8 天</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="node-第-3-天"><a href="#node-第-3-天" class="header-anchor">#</a> Node 第 3 天</h2> <h3 id="_1-学习目标"><a href="#_1-学习目标" class="header-anchor">#</a> 1. 学习目标</h3> <p>◆ 能够说出 <code>pageage.json</code> 文件中属性的含义</p> <p>◆ 知道怎么解决包下载慢的问题</p> <p>◆ 了解如何开发包</p> <p>◆ 了解如何发布包</p> <p>◆ 熟练模块的加载机制</p> <p>◆ 熟练 express 基本操作</p> <h3 id="_2-包管理配置"><a href="#_2-包管理配置" class="header-anchor">#</a> 2. 包管理配置</h3> <h4 id="_2-1-包管理配置的概念"><a href="#_2-1-包管理配置的概念" class="header-anchor">#</a> 2.1 包管理配置的概念</h4> <p><code>npm</code> 规定，在项目根目录中，必须提供一个叫做 <code>package.json</code> 的包管理配置文件，用来记录与项目有关的一些配置信息，例如：</p> <ul><li>项目的名称、版本号、描述等</li> <li>项目中都用到了哪些包</li> <li>哪些包只会在开发期间会用到</li> <li>哪些包在开发和部署时都需要用到</li></ul> <h4 id="_2-2-理解-package-json-配置文件的作用"><a href="#_2-2-理解-package-json-配置文件的作用" class="header-anchor">#</a> 2.2 理解 <code>package.json</code> 配置文件的作用</h4> <h5 id="_2-2-1-多人协作的问题"><a href="#_2-2-1-多人协作的问题" class="header-anchor">#</a> 2.2.1 多人协作的问题</h5> <ol><li>包的体积</li></ol> <ul><li>整个项目的体积是 <code>30.4M</code></li> <li>第三方包的体积是 <code>28.8M</code></li> <li>项目源代码的体积 <code>1.6M</code></li></ul> <ol start="2"><li>遇到的问题</li></ol> <ul><li>第三方包的体积过大，不方便团队成员之间共享项目源代码</li></ul> <ol start="3"><li>解决方案</li></ol> <ul><li>共享时剔除 node_modules</li></ul> <img src="/heima2020/assets/img/001 - package.53c3333a.png"> <h5 id="_2-2-2-如何记录项目中安装了哪些包"><a href="#_2-2-2-如何记录项目中安装了哪些包" class="header-anchor">#</a> 2.2.2 如何记录项目中安装了哪些包</h5> <ul><li>在项目根目录中，创建一个叫做 **<code>package.json</code>**的配置文件，即可用来记录项目中安装了哪些包。从而方便剔除 <code>node_modules</code> 目录之后，在团队成员之间共享项目的源代码</li></ul> <ul><li>今后在项目开发中，一定要把 <code>node_modules</code> 文件夹，添加到 <code>.gitignore</code> 忽略文件中</li></ul> <h4 id="_2-3-快速创建-package-json"><a href="#_2-3-快速创建-package-json" class="header-anchor">#</a> 2.3 快速创建 <code>package.json</code></h4> <p><code>npm</code> 包管理工具提供了一个快捷命令，可以在执行命令时所处的目录中，快速创建 <code>package.json</code> 这个包管理配置文件</p> <div class="language-js extra-class"><pre class="language-js"><code>npm init
</code></pre></div><p>注意：</p> <ol><li>上述命令<strong>只能在英文的目录下成功运行！<strong>所以，项目文件夹的名称</strong>一定要使用英文命名，不要使用中文，不能出现空格</strong></li> <li>运行 <code>npm install</code> 命令安装包的时候，<code>npm</code> 包管理工具会自动把包的名称和版本号，记录到 <code>package.json</code> 中</li></ol> <h4 id="_2-4-了解-dependencies-节点的作用"><a href="#_2-4-了解-dependencies-节点的作用" class="header-anchor">#</a> 2.4 了解 dependencies 节点的作用</h4> <p><code>package.json</code> 文件中，有一个 <code>dependencies</code> 节点，专门用来记录您使用 <code>npm install</code> 命令安装了哪些包</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 安装一个包</span>
npm i xxx

<span class="token comment">// 安装多个包</span>
npm i xxx1  xxx2
</code></pre></div><img src="/heima2020/assets/img/002 - package.d60bf8c0.png"> <h4 id="_2-5-一次性安装所有的包"><a href="#_2-5-一次性安装所有的包" class="header-anchor">#</a> 2.5 一次性安装所有的包</h4> <ol><li>当我们拿到一个剔除了 node_modules 的项目之后，需要先把所有的包下载到项目中，才能将项目运行起来。否则会报类似于下面的错误：</li></ol> <img src="/heima2020/assets/img/003 - 安装.dcf313dd.png"> <ol start="2"><li>可以运行 <code>npm install</code> 命令（或 <code>npm i</code>）一次性安装所有的依赖包</li></ol> <img src="/heima2020/assets/img/004 - npm i .2d597c84.png"> <h4 id="_2-6-卸载包"><a href="#_2-6-卸载包" class="header-anchor">#</a> 2.6 卸载包</h4> <ol><li><p>可以运行 <code>npm uninstall</code> 命令，来卸载指定的包：</p></li> <li><p>注意：<code>npm uninstall</code> 命令执行成功后，会把卸载的包，自动从 <code>package.json</code> 的 <code>dependencies</code> 中移除掉</p></li></ol> <img src="/heima2020/assets/img/005 - uninstall.772e3317.png"> <h4 id="_2-7-了解-devdependencies-节点的作用"><a href="#_2-7-了解-devdependencies-节点的作用" class="header-anchor">#</a> 2.7 了解 <code>devDependencies</code> 节点的作用</h4> <ol><li><p>如果某些包只在项目开发阶段会用到，在项目上线之后不会用到，则建议把这些包记录到 <code>devDependencies</code> 节点中</p></li> <li><p>与之对应的，如果某些包在开发和项目上线之后都需要用到，则建议把这些包记录到 <code>dependencies</code> 节点中</p></li> <li><p>您可以使用如下的命令，将包记录到 <code>devDependencies</code> 节点中</p></li></ol> <img src="/heima2020/assets/img/006 - dev.2a06e48a.png"> <h3 id="_3-解决包下载慢的问题"><a href="#_3-解决包下载慢的问题" class="header-anchor">#</a> 3. 解决包下载慢的问题</h3> <h4 id="_3-1-分析包下载慢的原因"><a href="#_3-1-分析包下载慢的原因" class="header-anchor">#</a> 3.1 分析包下载慢的原因</h4> <p>在使用 <code>npm</code> 下包的时候，默认从国外的 <a href="https://registry.npmjs.org/" target="_blank" rel="noopener noreferrer">npm<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 服务器进行下载，此时，网络数据的传输需要经过漫长的海底光缆，因此下包速度会很慢</p> <h4 id="_3-2-了解淘宝-npm-镜像服务器的作用"><a href="#_3-2-了解淘宝-npm-镜像服务器的作用" class="header-anchor">#</a> 3.2 了解淘宝 <code>npm</code> 镜像服务器的作用</h4> <ol><li>淘宝在国内搭建了一个服务器，专门把国外官方服务器上的包同步到国内的服务器，然后在国内提供下包的服务。从而极大的提高了下包的速度</li> <li>镜像是一种文件存储形式，一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像</li></ol> <img src="/heima2020/assets/img/007 - 淘宝 NPM 镜像服务器.3376fd27.png"> <h4 id="_3-3-切换-npm-的下包镜像源"><a href="#_3-3-切换-npm-的下包镜像源" class="header-anchor">#</a> 3.3 切换 <code>npm</code> 的下包镜像源</h4> <p>下包的镜像源，指的就是下包的服务器地址</p> <img src="/heima2020/assets/img/008 - 切换镜像源.bbbf0df8.png" alt="切换镜像源" style="zoom:67%;"> <h4 id="_3-4-使用-nrm-切换下载包的服务器"><a href="#_3-4-使用-nrm-切换下载包的服务器" class="header-anchor">#</a> 3.4 使用 <code>nrm</code> 切换下载包的服务器</h4> <p>为了更方便的切换下包的镜像源，可以安装 <code>nrm</code> 这个小工具，利用 <code>nrm</code> 提供的终端命令，可以快速查看和切换下包的镜像源</p> <img src="/heima2020/assets/img/009 - nrm.3f16aa06.png" style="zoom:67%;"> <h3 id="_4-包的分类"><a href="#_4-包的分类" class="header-anchor">#</a> 4. 包的分类</h3> <h4 id="_4-1-项目包"><a href="#_4-1-项目包" class="header-anchor">#</a> 4.1 项目包</h4> <ol><li><p>那些被安装到项目的 <code>node_modules</code> 目录中的包，都是项目包</p></li> <li><p>项目包又分为两类，分别是：</p></li></ol> <ul><li><p>开发依赖包，被记录到 <code>devDependencies</code> 节点中的包，只在开发期间会用到</p></li> <li><p>核心依赖包，被记录到 <code>dependencies</code> 节点中的包，在开发期间和项目上线之后都会用到</p> <img src="/heima2020/assets/img/010 - 项目包.c20d6e2b.png" style="zoom:67%;"></li></ul> <h4 id="_4-2-全局包"><a href="#_4-2-全局包" class="header-anchor">#</a> 4.2 全局包</h4> <ol><li><p>在执行 <code>npm install</code> 命令时，如果提供了 <code>-g</code> 参数，则会把包安装为全局包</p></li> <li><p>全局包会被安装到 <code>C:\Users\用户目录\AppData\Roaming\npm\node_modules</code> 目录下</p></li> <li><p>注意：</p></li></ol> <ul><li><p>只有工具性质的包，才有全局安装的必要性。因为它们提供了好用的终端命令</p></li> <li><p>判断某个包是否需要全局安装后才能使用，可以参考官方提供的使用说明即可</p> <img src="/heima2020/assets/img/011 - 全局包.670ff325.png" style="zoom:67%;"></li></ul> <h4 id="_4-3-i5ting-toc-的安装和使用"><a href="#_4-3-i5ting-toc-的安装和使用" class="header-anchor">#</a> 4.3 <code>i5ting_toc</code> 的安装和使用</h4> <ol><li><p><code>i5ting_toc</code> 是一个可以把 <code>md</code> 文档转为 <code>html</code> 页面的小工具</p> <img src="/heima2020/assets/img/012 - i5ting_toc.9e2f168c.png" style="zoom:67%;"></li></ol> <h3 id="_5-开发属于自己的包"><a href="#_5-开发属于自己的包" class="header-anchor">#</a> 5. 开发属于自己的包</h3> <h4 id="_5-1-规范的包结构"><a href="#_5-1-规范的包结构" class="header-anchor">#</a> 5.1 规范的包结构</h4> <ol><li>一个规范的包，它的组成结构，必须符合以下 3 点要求：</li></ol> <ul><li>包必须以单独的目录而存在</li> <li>包的顶级目录下要必须包含 <code>package.json</code> 这个包管理配置文件</li> <li><code>package.json</code> 中必须包含 <code>name</code>，<code>version</code>，<code>main</code> 这三个属性，分别代表包的名字、版本号、包的入口</li></ul> <ol start="2"><li>注意：以上 3 点要求是一个规范的包结构必须遵守的格式，关于更多的约束，可以参考<a href="https://yarnpkg.com/zh-Hans/docs/package-json" target="_blank" rel="noopener noreferrer">这个网址<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol> <h4 id="_5-2-了解需要实现的功能"><a href="#_5-2-了解需要实现的功能" class="header-anchor">#</a> 5.2 了解需要实现的功能</h4> <ol><li>需要实现的功能</li></ol> <ul><li><p>格式化日期</p> <img src="/heima2020/assets/img/012 - 功能1.c033581a.png" style="zoom:67%;"></li></ul> <ul><li><p>转移 <code>HTML</code> 中的特殊字符</p> <img src="/heima2020/assets/img/013 - 功能2.0b8c4e0c.png" style="zoom:52%;"></li></ul> <ul><li><p>还原 <code>HTML</code> 中的特殊字符</p> <img src="/heima2020/assets/img/014 - 功能5.55d8477e.png" style="zoom:67%;"></li></ul> <h4 id="_5-3-初始化包的基础结构"><a href="#_5-3-初始化包的基础结构" class="header-anchor">#</a> 5.3 初始化包的基础结构</h4> <ol><li><p>新建 <code>itheima-tools</code> 文件夹，作为包的根目录</p></li> <li><p>在 <code>itheima-tools</code> 文件夹中，新建如下三个文件：</p></li></ol> <ul><li><code>package.json</code> (包管理配置文件)</li> <li><code>index.js</code> (包的入口文件)</li> <li><code>README.md</code> (包的说明文档)</li></ul> <h4 id="_5-4-初始化-package-json-配置文件"><a href="#_5-4-初始化-package-json-配置文件" class="header-anchor">#</a> 5.4 初始化 <code>package.json</code> 配置文件</h4> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;flightloong-tools&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1.0.0&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;提供格式化时间、HTMLEscape相关功能&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;main&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index.js&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;keywords&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;itcast&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;itheima&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;dateFormat&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;escape&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;license&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ISC&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_5-5-在-index-js-中定义格式化时间的方法"><a href="#_5-5-在-index-js-中定义格式化时间的方法" class="header-anchor">#</a> 5.5 在 <code>index.js</code> 中定义格式化时间的方法</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 包的入口文件 index.js</span>

<span class="token comment">// 定义格式化时间的函数</span>
<span class="token keyword">function</span> <span class="token function">dateFormat</span><span class="token punctuation">(</span><span class="token parameter">dateStr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> dt <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>dateStr<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> y <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> m <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> hh <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> mm <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> ss <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>y<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>m<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>d<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>hh<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>mm<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>ss<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 定义一个补零的函数</span>
<span class="token keyword">function</span> <span class="token function">padZero</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> n <span class="token operator">&gt;</span> <span class="token number">9</span> <span class="token operator">?</span> n <span class="token operator">:</span> <span class="token string">&quot;0&quot;</span> <span class="token operator">+</span> n<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 向外暴露需要的成员</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  dateFormat<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 测试代码</span>

<span class="token keyword">const</span> itheima <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;./flightloong-tools/index&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 格式化时间的代码</span>
<span class="token keyword">const</span> dtStr <span class="token operator">=</span> itheima<span class="token punctuation">.</span><span class="token function">dateFormat</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dtStr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2020-06-23 01:16:57</span>
</code></pre></div><h4 id="_5-6-package-json-文件中-main-的作用"><a href="#_5-6-package-json-文件中-main-的作用" class="header-anchor">#</a> 5.6 <code>package.json</code> 文件中 <code>main</code> 的作用</h4> <p>在导入一个文件的时候，如果没有指定一个特定的文件，但是却能够得到某个包的返回内容，这是因为 <code>Node</code> 在使用 <code>require</code> 导入某个路径的时候，发现没有具体的文件，就会看这个路径下查看是否有 <code>package.json</code> 这个文件，如果有，则查看是否有 <code>main</code> 这个属性，如果有，则指定 <code>main</code> 属性对应的文件作为要执行的文件</p> <h4 id="_5-7-在-index-js-中定义转义-html-的方法"><a href="#_5-7-在-index-js-中定义转义-html-的方法" class="header-anchor">#</a> 5.7 在 <code>index.js</code> 中定义转义 HTML 的方法</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// index.js</span>
<span class="token comment">// 定义转义 HTML 字符的函数</span>
<span class="token keyword">function</span> <span class="token function">htmlEscape</span><span class="token punctuation">(</span><span class="token parameter">htmlstr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> htmlstr<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/&lt;|&gt;|&quot;|&amp;/g</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">match</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>match<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&lt;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&amp;glt;&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&gt;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&amp;gt;&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">'&quot;'</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&amp;quot;&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&amp;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&amp;amp;&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// test.js</span>

<span class="token keyword">const</span> itheima <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;./flightloong-tools/index&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 转义 Html 字符串</span>
<span class="token keyword">const</span> htmlStr <span class="token operator">=</span> <span class="token string">'&lt;h4 title=&quot;abc&quot;&gt;这是h4标签&lt;span&gt;123&amp;nbsp;&lt;/span&gt;&lt;/h4&gt;'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> str <span class="token operator">=</span> itheima<span class="token punctuation">.</span><span class="token function">htmlEscape</span><span class="token punctuation">(</span>htmlStr<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_5-8-在-index-js-中定义还原-html-的方法"><a href="#_5-8-在-index-js-中定义还原-html-的方法" class="header-anchor">#</a> 5.8 在 <code>index.js</code> 中定义还原 HTML 的方法</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 定义还原 HTML 字符的函数</span>
<span class="token keyword">function</span> <span class="token function">htmlUnEscape</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/&amp;glt;|&amp;gt;|&amp;quot;|&amp;amp;/g</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">match</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>match<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&amp;glt;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&lt;&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&amp;gt;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&gt;&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&amp;quot;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'&quot;'</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&amp;amp;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&amp;&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 还原 Html 字符串</span>
<span class="token keyword">const</span> resetHtml <span class="token operator">=</span> itheima<span class="token punctuation">.</span><span class="token function">htmlUnEscape</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>resetHtml<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_5-9-划分不同的模块"><a href="#_5-9-划分不同的模块" class="header-anchor">#</a> 5.9 划分不同的模块</h4> <ol><li>将格式化时间的功能，拆分到 <code>src</code> -&gt; <code>dateFormat.js</code> 中</li> <li>将处理 <code>HTML</code> 字符串的功能，拆分到 <code>src</code> -&gt; <code>htmlEscape.js</code> 中</li> <li>在 <code>index.js</code> 中，导入两个模块，得到需要向外共享的方法</li> <li>在 <code>index.js</code> 中，使用 <code>module.exports</code> 把对应的方法共享出去</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// dateFormat.js</span>

<span class="token comment">// 定义格式化时间的函数</span>
<span class="token keyword">function</span> <span class="token function">dateFormat</span><span class="token punctuation">(</span><span class="token parameter">dateStr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> dt <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>dateStr<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> y <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> m <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> hh <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> mm <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> ss <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>y<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>m<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>d<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>hh<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>mm<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>ss<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 定义一个补零的函数</span>
<span class="token keyword">function</span> <span class="token function">padZero</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> n <span class="token operator">&gt;</span> <span class="token number">9</span> <span class="token operator">?</span> n <span class="token operator">:</span> <span class="token string">&quot;0&quot;</span> <span class="token operator">+</span> n<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  dateFormat<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// htmlEscape.js</span>

<span class="token comment">// 定义转义 HTML 字符的函数</span>
<span class="token keyword">function</span> <span class="token function">htmlEscape</span><span class="token punctuation">(</span><span class="token parameter">htmlstr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> htmlstr<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/&lt;|&gt;|&quot;|&amp;/g</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">match</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>match<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&lt;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&amp;glt;&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&gt;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&amp;gt;&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">'&quot;'</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&amp;quot;&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&amp;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&amp;amp;&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 定义还原 HTML 字符的函数</span>
<span class="token keyword">function</span> <span class="token function">htmlUnEscape</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/&amp;glt;|&amp;gt;|&amp;quot;|&amp;amp;/g</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">match</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>match<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&amp;glt;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&lt;&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&amp;gt;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&gt;&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&amp;quot;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'&quot;'</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;&amp;amp;&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">&quot;&amp;&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  htmlEscape<span class="token punctuation">,</span>
  htmlUnEscape<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// test.js</span>

<span class="token keyword">const</span> itheima <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;./flightloong-tools/index&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 格式化时间的代码</span>
<span class="token keyword">const</span> dtStr <span class="token operator">=</span> itheima<span class="token punctuation">.</span><span class="token function">dateFormat</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dtStr<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 转义 Html 字符串</span>
<span class="token keyword">const</span> htmlStr <span class="token operator">=</span> <span class="token string">'&lt;h4 title=&quot;abc&quot;&gt;这是h4标签&lt;span&gt;123&amp;nbsp;&lt;/span&gt;&lt;/h4&gt;'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> str <span class="token operator">=</span> itheima<span class="token punctuation">.</span><span class="token function">htmlEscape</span><span class="token punctuation">(</span>htmlStr<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 还原 Html 字符串</span>
<span class="token keyword">const</span> resetHtml <span class="token operator">=</span> itheima<span class="token punctuation">.</span><span class="token function">htmlUnEscape</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>resetHtml<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_5-10-编写包的说明文档"><a href="#_5-10-编写包的说明文档" class="header-anchor">#</a> 5.10 编写包的说明文档</h4> <ol><li>包根目录中的 <code>README.md</code> 文件，是包的使用说明文档。通过它，我们可以事先把包的使用说明，以 <code>markdown</code> 的格式写出来，方便用户参考</li> <li><code>README</code> 文件中具体写什么内容，没有强制性的要求；只要能够清晰地把包的作用、用法、注意事项等描述清楚即可</li> <li>我们所创建的这个包的 <code>README.md</code>文档中，会包含以下 6 项内容</li></ol> <ul><li>安装方式</li> <li>导入方式</li> <li>格式化时间</li> <li>转义 HTML 中的特殊字符</li> <li>还原 HTML 中的特殊字符</li> <li>开源协议</li></ul> <div class="language-markdown extra-class"><pre class="language-markdown"><code><span class="token title important"><span class="token punctuation">###</span> 安装</span>

​<span class="token code keyword">`npm i flightloong-tools ​`</span>

<span class="token title important"><span class="token punctuation">###</span> 导入</span>

​<span class="token code keyword">`js const itheima = require('./flightloong-tools') ​`</span>

<span class="token title important"><span class="token punctuation">###</span> 格式化时间</span>

​<span class="token code keyword">`js // 调用 dateFormat 对时间进行格式化 const dtStr = itheima.dateFormat(new Date()) // 结果 2020-04-03 17:20:58 console.log(dtStr) ​`</span>

<span class="token title important"><span class="token punctuation">###</span> 转义 HTML 中的特殊字符</span>

​<span class="token code keyword">`js // 带转换的 HTML 字符串 const htmlStr = '&lt;h1 title=&quot;abc&quot;&gt;这是h1标签&lt;span&gt;123&amp;nbsp;&lt;/span&gt;&lt;/h1&gt;' // 调用 htmlEscape 方法进行转换 const str = itheima.htmlEscape(htmlStr) // 转换的结果 &amp;lt;h1 title=&amp;quot;abc&amp;quot;&amp;gt;这是h1标签&amp;lt;span&amp;gt;123&amp;amp;nbsp;&amp;lt;/span&amp;gt;&amp;lt;/h1&amp;gt; console.log(str) ​`</span>

<span class="token title important"><span class="token punctuation">###</span> 还原 HTML 中的特殊字符</span>

​<span class="token code keyword">`js // 待还原的 HTML 字符串 const str2 = itheima.htmlUnEscape(str) // 输出的结果 &lt;h1 title=&quot;abc&quot;&gt;这是h1标签&lt;span&gt;123&amp;nbsp;&lt;/span&gt;&lt;/h1&gt; console.log(str2) ​`</span>

<span class="token title important"><span class="token punctuation">###</span> 开源协议</span>

ISC
</code></pre></div><h4 id="_5-11-注册-npm-账号"><a href="#_5-11-注册-npm-账号" class="header-anchor">#</a> 5.11 注册 <code>npm</code> 账号</h4> <ol><li>访问 <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 网站，点击 <code>sign up</code> 按钮，进入注册用户界面</li> <li>填写账号相关的信息：<code>Full Name</code>、<code>Public Email</code>、<code>Username</code>、<code>Password</code></li> <li>点击 <code>Create an Account</code> 按钮，注册账号</li> <li>登录邮箱，点击验证链接，进行账号的验证</li></ol> <h4 id="_5-12-登录-npm-账号"><a href="#_5-12-登录-npm-账号" class="header-anchor">#</a> 5.12 登录 <code>npm</code> 账号</h4> <ol><li><code>npm</code> 账号注册完成后，可以在终端中执行 <code>npm login</code> 命令，依次输入用户名、密码、邮箱后，即可登录成功</li> <li><strong>注意：在运行 <code>npm login</code> 命令之前，必须先把下包的服务器地址切换为 <code>npm</code> 的官方服务器。否则会导致发布包失败！</strong></li></ol> <h4 id="_5-13-把包发布到-npm上"><a href="#_5-13-把包发布到-npm上" class="header-anchor">#</a> 5.13 把包发布到 <code>npm</code>上</h4> <p>将终端切换到包的根目录之后，运行 <code>npm publish</code> 命令，即可将包发布到 <code>npm</code> 上（注意：包名不能雷同）</p> <img src="/heima2020/assets/img/015 - npm publish.cf71663e.png" style="zoom:67%;"> <h4 id="_5-14-删除已发布的包"><a href="#_5-14-删除已发布的包" class="header-anchor">#</a> 5.14 - 删除已发布的包</h4> <ol><li>运行 <code>npm unpublish 包名 --force</code> 命令，即可从 <code>npm</code> 删除已发布的包</li></ol> <img src="/heima2020/assets/img/016 - npm publish.78741153.png" style="zoom:67%;"> <ol start="2"><li>注意事项</li></ol> <ul><li><code>npm unpublish</code> 命令<strong>只能删除 72 小时以内发布的包</strong></li> <li><code>npm unpublish</code> 删除的包，<strong>在 24 小时内不允许重复发布</strong></li> <li>发布包的时候要慎重，尽量<strong>不要往 <code>npm</code> 上发布没有意义的包！</strong></li></ul> <h3 id="_6-模块的加载机制"><a href="#_6-模块的加载机制" class="header-anchor">#</a> 6. 模块的加载机制</h3> <h4 id="_6-1-优先从缓存中加载"><a href="#_6-1-优先从缓存中加载" class="header-anchor">#</a> 6.1 优先从缓存中加载</h4> <p>模块在第一次加载后会被缓存，这意味着多次调用 <code>require()</code> 方法不会导致模块的代码被多次执行</p> <p>注意：不论内置模块、用户自定义模块、还是第三方模块，他们都会优先从缓存中加载，从而提高模块的加载效率</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 自定义模块.js</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;ok&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;./自定义模块.js&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;./自定义模块.js&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;./自定义模块.js&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_6-2-内置模块的加载优先级"><a href="#_6-2-内置模块的加载优先级" class="header-anchor">#</a> 6.2 内置模块的加载优先级</h4> <p>内置模块是由 <code>Node.js</code> 官方提供的模块，<strong>内置模块的加载优先级最高</strong></p> <p>例如： <code>require('fs')</code> 始终返回内置的 <code>fs</code> 模块，即使在 <code>node_modules</code> 目录下有名字相同的包也叫做 <code>fs</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;fs&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 始终返回的是内置的 fs 模块</span>
</code></pre></div><h4 id="_6-3-自定义模块的加载机制"><a href="#_6-3-自定义模块的加载机制" class="header-anchor">#</a> 6.3 自定义模块的加载机制</h4> <ol><li><p>使用 require() 加载自定义模块时，必须指定以 <code>./</code> 或者 <code>../</code> 开头的路径标识符。在加载自定义模块时，如果没有指定 <code>./</code> 或 <code>../</code> 这样的路径标识符，则 <code>node</code> 会把它当作 <code>内置模块</code> 或 <code>第三方模块</code> 进行加载</p></li> <li><p>在使用 <code>require()</code> 导入自定义模块时，如果省略了文件的拓展名，则 <code>Node</code> 会按照顺序分别尝试加载以下文件</p></li></ol> <ul><li>按照 <strong>确切的文件名</strong> 进行加载</li> <li>补全 **<code>.js</code> **扩展名进行加载</li> <li>补全 **<code>.json</code> ** 扩展名进行加载</li> <li>补全 <strong><code>.node</code></strong> 扩展名进行加载</li> <li>加载失败，终端报错</li></ul> <h4 id="_6-4-第三方模块的加载机制"><a href="#_6-4-第三方模块的加载机制" class="header-anchor">#</a> 6.4 第三方模块的加载机制</h4> <ol><li>如果传递给 <code>require()</code> 的模块标识符不是一个内置模块，也没有以 <code>'./'</code> 或 <code>'../'</code> 开头，则 <code>Node.js</code> 会从当前模块的父目录开始，尝试从 <code>/node_modules</code> 文件夹中加载第三方模块</li></ol> <ol start="2"><li><strong>如果没有找到对应的第三方模块，则移动到再上一层父目录中，进行加载，直到文件系统的根目录</strong></li></ol> <ol start="3"><li>假设在 <code>C:\Users\itheima\project\foo.js</code> 文件里调用了 <code>require('tools')</code>，则 <code>Node.js</code> 会按以下顺序查找</li></ol> <ul><li><code>C:\Users\itheima\project\node_modules\tools</code></li> <li><code>C:\Users\itheima\node_modules\tools</code></li> <li><code>C:\Users\node_modules\tools</code></li> <li><code>C:\node_modules\tools</code></li></ul> <h4 id="_6-5-目录作为模块"><a href="#_6-5-目录作为模块" class="header-anchor">#</a> 6.5 目录作为模块</h4> <p>当把目录作为模块标识符，传递给 <code>require()</code> 进行加载的时候，有三种加载方式：</p> <ol><li>在被加载的目录下查找一个叫做 <code>package.json</code> 的文件，并寻找 <code>main</code> 属性，作为 <code>require()</code> 加载的入口</li> <li>如果目录里没有 <code>package.json</code> 文件，或者 <code>main</code> 入口不存在或无法解析，则 <code>Node.js</code> 将会试图加载目录下的 <code>index.js</code> 文件</li> <li>如果以上两步都失败了，则 <code>Node.js</code> 会在终端打印错误消息，报告模块的缺失：<code>Error: Cannot find module xxx</code></li></ol> <h3 id="_7-初始-express"><a href="#_7-初始-express" class="header-anchor">#</a> 7. 初始 express</h3> <h4 id="_7-1-express-简介"><a href="#_7-1-express-简介" class="header-anchor">#</a> 7.1 express 简介</h4> <h5 id="_7-1-1-什么是-express"><a href="#_7-1-1-什么是-express" class="header-anchor">#</a> 7.1.1 什么是 express</h5> <ol><li>官方给出的概念：<code>Express</code> 是基于 <code>Node.js</code> 平台，快速、开放、极简的 <code>Web</code> 开发框架，<a href="http://www.expressjs.com.cn/" target="_blank" rel="noopener noreferrer">官方<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>通俗的理解：<code>Express</code> 的作用和 <code>Node.js</code> 内置的 <code>http</code> 模块类似，是专门用来创建 Web 服务器的</li> <li><code>Express</code> 的本质：就是一个 <code>npm</code> 上的第三方包，提供了快速创建 Web 服务器的便捷方法</li></ol> <h5 id="_7-1-2-进一步理解-express"><a href="#_7-1-2-进一步理解-express" class="header-anchor">#</a> 7.1.2 进一步理解 Express</h5> <ol><li>思考：不使用 Express 能否创建 Web 服务器？</li></ol> <ul><li>答案：能，使用 <code>Node.js</code> 提供的原生 <code>http</code> 模块即可</li></ul> <ol start="2"><li>思考：既生瑜何生亮（有了 <code>http</code> 内置模块，为什么还有用 <code>Express</code>）？</li></ol> <ul><li>答案：<code>http</code> 内置模块用起来很复杂，开发效率低；<code>Express</code> 是基于内置的 <code>http</code> 模块进一步封装出来的，能够- 极大的提高开发效率</li></ul> <ol start="3"><li>思考：<code>http</code> 内置模块与 <code>Express</code> 是什么关系？</li></ol> <ul><li>答案：类似于浏览器中 <code>Web API</code> 和 <code>jQuery</code> 的关系。后者是基于前者进一步封装出来的</li></ul> <h5 id="_7-1-3-express-能做什么"><a href="#_7-1-3-express-能做什么" class="header-anchor">#</a> 7.1.3 Express 能做什么</h5> <ol><li>对于前端程序员来说，最常见的两种服务器，分别是：</li></ol> <ul><li><p><strong><code>Web</code> 网站服务器</strong>：专门对外提供 <code>Web</code> 网页资源的服务器。</p></li> <li><p><strong><code>API</code> 接口服务器</strong>：专门对外提供 <code>API</code> 接口的服务器。</p></li></ul> <ol start="2"><li>使用 <code>Express</code>，我们可以方便、快速的创建 <code>Web</code> 网站的服务器或 <code>API</code> 接口的服务器。</li></ol> <h4 id="_7-2-express-的基本使用"><a href="#_7-2-express-的基本使用" class="header-anchor">#</a> 7.2 Express 的基本使用</h4> <ol><li>安装</li></ol> <p>在项目所处的目录中，运行如下的终端命令，即可将 express 安装到项目中使用</p> <div class="language-js extra-class"><pre class="language-js"><code>npm i express
</code></pre></div><ol start="2"><li><p>创建基本的 Web 服务器</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1.导入 express</span>
<span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;express&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 2. 创建 web 服务器</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 3. 调用 app.listen(端口号, 启动后的回调函数), 启动服务器</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;running……&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ol> <h4 id="_7-3-监听-get-和-post-请求-并影响客户端"><a href="#_7-3-监听-get-和-post-请求-并影响客户端" class="header-anchor">#</a> 7.3 监听 GET 和 POST 请求，并影响客户端</h4> <ol><li><p>监听 <code>GET</code> 请求</p> <ul><li><p>通过 <code>app.get()</code> 方法，可以监听客户端的 GET 请求，具体的语法格式如下</p> <img src="/heima2020/assets/img/017 - 监听GET请求.394f0c84.png" alt="监听GET请求.png" style="zoom:67%;"></li></ul></li> <li><p>监听 <code>POST</code> 请求</p> <ul><li><p>通过 <code>app.post()</code> 方法，可以监听客户端的 POST 请求，具体的语法格式如下</p> <img src="/heima2020/assets/img/018 - 监听POST请求.8eebb746.png" alt="监听POST请求" style="zoom:67%;"></li></ul></li></ol> <ol start="3"><li>把内容响应给客户端</li></ol> <ul><li><p>通过 <code>res.send()</code> 方法，可以把处理好的内容，发送给客户端</p> <img src="/heima2020/assets/img/019 - send.b8ea7428.png" alt="send" style="zoom:67%;"></li></ul> <ol start="4"><li>完整代码</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1.导入 express</span>
<span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;express&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 2. 创建 web 服务器</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 4. 监听客户端的 GET 和 Post 请求，并向客户端响应具体的内容</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;/user&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 调用 express 提供的 res.send() 方法，向客户端响应一个 JSON 对象</span>
  res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;zs&quot;</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> gender<span class="token operator">:</span> <span class="token string">&quot;男&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&quot;/user&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 调用 express 提供的 res.send() 方法，向客户端响应一个文本字符串</span>
  res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">&quot;请求成功&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 3. 调用 app.listen(端口号, 启动后的回调函数), 启动服务器</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;running……&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_7-4-获取-url-中携带的查询参数"><a href="#_7-4-获取-url-中携带的查询参数" class="header-anchor">#</a> 7.4 获取 URL 中携带的查询参数</h4> <ol><li>通过 <code>req.query</code> 对象，可以访问到客户端通过查询字符串的形式，发送到服务器的参数</li></ol> <img src="/heima2020/assets/img/020 - 获取 URL 中携带的查询参数.fbe10ad8.png" style="zoom:67%;"> <ol start="2"><li>完整代码</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;express&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 通过 req.query 可以获取到客户端发送过来的，查询参数</span>
  <span class="token comment">// 注意：默认情况下， req.query 是一个空对象</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>query<span class="token punctuation">)</span><span class="token punctuation">;</span>
  res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>query<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;running……&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_7-5-获取-url-中的动态参数"><a href="#_7-5-获取-url-中的动态参数" class="header-anchor">#</a> 7.5 获取 URL 中的动态参数</h4> <ol><li>通过 <code>req.params</code> 对象，可以访问到 <code>URL</code> 中，通过 : 匹配到的动态参数</li></ol> <img src="/heima2020/assets/img/021 - 获取 URL 中的动态参数.e5dc7274.png" style="zoom:67%;"> <ol start="2"><li>补充知识点</li></ol> <ul><li><code>/:id​</code> -- id 值不是固定的，可以自己定义，例如： <code>/:ids</code></li> <li>展示到页面中的 <code>id</code> 键，是自定义的变量值</li> <li>参数可以有多个，例如： <code>/:ids/:name</code></li></ul> <ol start="3"><li>完整代码</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;express&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 注意：这里的 :id 是一个动态的参数</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;/user/:id&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// req.params 是动态匹配到的 URL 参数，默认也会是一个空对象</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
  res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;running……&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_7-6-托管静态资源"><a href="#_7-6-托管静态资源" class="header-anchor">#</a> 7.6 托管静态资源</h4> <h5 id="_7-6-1-express-static"><a href="#_7-6-1-express-static" class="header-anchor">#</a> 7.6.1 <code>express.static()</code></h5> <ol><li><code>express</code> 提供了一个非常好用的函数，叫做 <code>express.static()</code>，通过它，我们可以非常方便地创建一个静态资源服务器，
例如，通过如下代码就可以将 <code>public</code> 目录下的图片、<code>CSS</code> 文件、<code>JavaScript</code> 文件对外开放访问了</li></ol> <img src="/heima2020/assets/img/022 - express.static().11cbcaf6.png" alt="express.static" style="zoom:67%;"> <p>现在，你就可以访问 public 目录中的所有文件了：
访问图片资源：http://localhost:3000/images/bg.jpg
访问 <code>css</code> 资源：http://localhost:3000/css/style.css
访问 <code>js</code> 资源：http://localhost:3000/js/login.js</p> <ol start="2"><li>注意：<code>Express</code> 在指定的静态目录中查找文件，并对外提供资源的访问路径。因此，存放静态文件的目录名不会出现在 <code>URL</code> 中</li></ol> <ol start="3"><li>完整代码</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;express&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 在这里，调用 express.static() 方法，快速的对外提供静态资源</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&quot;public&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;running……&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_7-6-2-托管多个静态资源目录"><a href="#_7-6-2-托管多个静态资源目录" class="header-anchor">#</a> 7.6.2 托管多个静态资源目录</h5> <ol><li>如果要托管多个静态资源目录，请多次调用 <code>express.static()</code> 函数，
访问静态资源文件时，<code>express.static()</code> 函数会根据目录的添加顺序查找所需的文件</li></ol> <img src="/heima2020/assets/img/023 - 托管多个静态资源目录.8bbd40c7.png" style="zoom:67%;"> <ol start="2"><li><p>完整代码</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;express&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 在这里，调用 express.static() 方法，快速的对外提供静态资源</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&quot;public&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&quot;static&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;running……&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ol> <h5 id="_7-6-3-挂载路径前缀"><a href="#_7-6-3-挂载路径前缀" class="header-anchor">#</a> 7.6.3 挂载路径前缀</h5> <ol><li>如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式</li></ol> <img src="/heima2020/assets/img/024 - 挂载路径前缀.8580948d.png" style="zoom:67%;"> <p>可以通过带有 <code>/public</code> 前缀地址来访问 public 目录中的文件了：
http://localhost:3000/public/images/kitten.jpg
http://localhost:3000/public/css/style.css
http://localhost:3000/public/js/app.js</p> <ol start="2"><li>完整代码</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;express&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 在这里，调用 express.static() 方法，快速的对外提供静态资源</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">&quot;/static&quot;</span><span class="token punctuation">,</span> express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&quot;public&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;running……&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_8-安装-nodemon"><a href="#_8-安装-nodemon" class="header-anchor">#</a> 8. 安装 <code>nodemon</code></h4> <h4 id="_8-1-安装-nodemon"><a href="#_8-1-安装-nodemon" class="header-anchor">#</a> 8.1 安装 <code>nodemon</code></h4> <ol><li>为什么要使用 <code>nodemon</code></li></ol> <p>在编写调试 <code>Node.js</code> 项目的时候，如果修改了项目的代码，则需要频繁的手动 <code>close</code> 掉，然后再重新启动，非常繁琐。现在，我们可以使用 <a href="https://www.npmjs.com/package/nodemon" target="_blank" rel="noopener noreferrer">nodemon<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 这个工具，它能够监听项目文件的变动，当代码被修改后，<code>nodemon</code> 会自动帮我们重启项目，极大方便了开发和调试</p> <ol start="2"><li><p>安装 <code>nodemon</code></p> <div class="language-js extra-class"><pre class="language-js"><code>npm i nodemon <span class="token operator">-</span>g
</code></pre></div></li></ol> <h4 id="_8-2-使用-nodemon-实现后台项目的重启"><a href="#_8-2-使用-nodemon-实现后台项目的重启" class="header-anchor">#</a> 8.2 使用 <code>nodemon</code> 实现后台项目的重启</h4> <ol><li>当基于 <code>Node.js</code> 编写了一个网站应用的时候，传统的方式，是运行 <code>node app.js</code> 命令，来启动项目
这样做的坏处是：代码被修改之后，需要手动重启项目</li></ol> <ol start="2"><li><p>将 <code>node</code> 命令替换为 <code>nodemon</code> 命令，使用 <code>nodemon app.js</code> 来启动项目</p> <p>这样做的好处是：代码被修改之后，会被 <code>nodemon</code> 监听到，从而实现自动重启项目的效果</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 使用 node 运行项目</span>
node app<span class="token punctuation">.</span>js

<span class="token comment">// 使用 nodemon 运行项目</span>
nodemon index<span class="token punctuation">.</span>js
</code></pre></div></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/heima2020/node/day02.html" class="prev">
        Node 第 2 天
      </a></span> <span class="next"><a href="/heima2020/node/day04.html">
        Node 第 4 天
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/heima2020/assets/js/app.e2adc9d2.js" defer></script><script src="/heima2020/assets/js/2.7389c9d3.js" defer></script><script src="/heima2020/assets/js/6.1b7d5a6d.js" defer></script>
  </body>
</html>
